<!--
 * @Descripttion: 
 * @version: 
 * @@Company: DCIT-SH
 * @Author: Sunny Chen
 * @Date: 2024-07-29 21:08:05
 * @LastEditors: Sunny Chen
 * @LastEditTime: 2024-07-29 21:28:06
-->
<template>
	<div class="panel" ref="panel">
		<div class="head">
			<span>{{props.title}}</span>
		</div>
		<div class="content">
      <!-- 动态组件 -->
      <component :is="currentComponent" />
		</div>
	</div>
</template>

<script setup>
	const props=defineProps({
		title:{
			type:String,
			default:''
		},
    top:{
      type:Number,
      default:0,
      required: true,
    },
    leftOrRight:{
      type:String,
      // default:"left",
      required:true,
    },
    currentComponent:{
      type:Object,
      required:true,
    }
	})
  import { onMounted,ref } from 'vue';
  const panel = ref(null);
  onMounted(()=>{
    panel.value.style.top = props.top + 'px';
    if(props.leftOrRight == 'left'){
      panel.value.style.left = "10px";
    }else{
      panel.value.style.right = '10px';
    }
  })
</script>
<style scoped>
	.panel{
		/* min-width: 300.006px;
		min-height: 190.006px; */
    width: 26%;
    height: 250px;
		display: flex;
		flex-direction: column;
    position: absolute;
    /* top: 82.5px; */
    /* left: 60px; */
	}

	.panel .head{
		width: 100%;
		height: 45px;
		background: url('@/assets/uiResources/panel-header.png');
		background-size: cover;
		font-family: '等线Bold';
		letter-spacing: 1px;
	}

	.panel .head span{
		display: inline-block;
		font-size: 21px;
		background: rgb(255,255,255);
		background-image: linear-gradient(180deg, rgba(255,255,255,1) 9%, rgba(211,156,50,1) 57%);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		height: 100%;
		line-height: 45px;
		margin-left: 38px;
		margin-top: 2px;
	}

	.panel .content{
		width: 100%;
		flex: 1;
		background: url('@/assets/uiResources/panel-content.png');
		background-size: 100% 100%;
		pointer-events: all;
		background-color:rgba(0,0,0,.4);
	}

</style>